<template>
  <div class="flex_cm container" style="height: 100%">
    <div class="flex1 bg_fff p_10">
      <div class="flex_js p_10">
        <div class="c_666 fw">企业等级管理</div>
        <div class="flex">
          <setTable
            :data="header_list"
            :height_size="height_size"
            @changeShowTable="
              (e) => {
                header_list[e].showTable = !header_list[e].showTable
              }
            "
            @resetTableSet="
              () => {
                header_list.forEach((item) => {
                  item.showTable = true
                })
              }
            "
            @changeHeightSize="
              (e) => {
                height_size = e
              }
            "
          ></setTable>
        </div>
      </div>
      <el-table
        style="text-align: center"
        :data="list"
        max-height="750"
        border
        highlight-current-row
        :row-style="{
          height: height_size == 2 ? '50px' : '',
        }"
        :cell-style="{
          padding: height_size == 3 ? '0' : '',
        }"
        :default-sort="{ prop: 'index', order: '' }"
        :tree-props="{
          children: 'levelDetailList',
          hasChildren: 'hasChildren',
        }"
        row-key="id"
      >
        <el-table-column
          label="序号"
          type="index"
          width="80px"
        ></el-table-column>
        <el-table-column
          label="名称"
          sortable
          prop="name"
          v-if="header_list[0].showTable"
        ></el-table-column>
        <el-table-column
          label="存储空间( 0~50 单位：G )"
          sortable
          prop="space"
          v-if="header_list[1].showTable"
          ><template #default="scope">
            <div
              v-if="scope.row.space == '' || scope.row.space > 0"
              class="flex_cc"
            >
              <el-input-number
                :min="0"
                :max="50"
                v-model="scope.row.space"
                :step="1"
                step-strictly
                placeholder="请输入"
              />
              <el-button
                type="primary"
                class="m_left10"
                @click="space_submit(scope.row)"
                :loading="btn_loading"
                >确定</el-button
              >
            </div>
          </template></el-table-column
        >
        <el-table-column label="操作" v-if="has_role_list[1].has_role">
          <template #default="scope: any">
            <el-tooltip
              content="编辑"
              placement="bottom"
              v-if="scope.row.productId"
            >
              <svgBtn
                icon="table_edit"
                style="font-size: 20px"
                @click="update_list(scope)"
              ></svgBtn>
            </el-tooltip>
            <!-- <el-button @click="update_list(scope)">编辑</el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
  <el-drawer
    v-model="show_box"
    direction="rtl"
    size="50%"
    destroy-on-close
    :close-on-click-modal="false"
  >
    <template #title>
      <h4>升级须知</h4>
    </template>
    <template #default>
      <wangeditor
        :text="form_data.notice"
        style="height: calc(100%)"
      ></wangeditor>
    </template>
    <template #footer>
      <div class="tr m_top10">
        <el-button @click="show_box = false">取消</el-button>
        <el-button
          type="primary"
          :loading="btn_loading"
          @click="EventBus.emit('submit')"
          >保存</el-button
        >
      </div>
    </template>
  </el-drawer>
</template>

<script lang="ts" setup>
import { check_role } from '@/utils/utils' // 权限校验
import wangeditor from '@/view/components/wangeditor.vue'
import setTable from '@/view/components/setTable.vue'
import svgBtn from '@/components/svg_button.vue'
import { onMounted, ref, onUnmounted, computed } from 'vue'
import { ElMessage } from 'element-plus'
import axios from '@/service/HttpRequest'
import serviceApi from '@/service/api'
import EventBus from '@/utils/EventBus'
import { useStore } from 'vuex'
const store = useStore()
// 页面权限组
const has_role_list = ref([
  { path: '', has_role: false },
  { path: 'enterpriseLevel/put', has_role: false },
])
const list = ref()
const show_box = ref(false)
const height_size = ref()
const header_list = ref([
  {
    label: '名称',
    value: '',
    showTable: true,
    type: 'input',
    isShow: true,
    options: [],
  },
  {
    label: '存储空间',
    value: '',
    showTable: true,
    type: 'input',
    isShow: true,
    options: [],
  },
])
const form_data = ref({
  productId: '',
  levelId: '',
  notice: '',
})
const product_list = computed(() => {
  return store.state.product_list
})
onMounted(() => {
  has_role_list.value.forEach((item) => {
    item.has_role = check_role(item.path)
  })
  EventBus.on('refresh', () => {
    get_list()
    ElMessage.success('刷新成功！')
  })
  EventBus.on('commit_editor', (e) => {
    // 获取富文本编译器 内容
    console.log(e)
    to_submit(e)
  })
  get_list()
})
onUnmounted(() => {
  EventBus.off('refresh')
  EventBus.off('commit_editor')
})
const btn_loading = ref(false)
const space_submit = (e) => {
  console.log(e)
  if (btn_loading.value) return
  btn_loading.value = true
  axios
    .request({
      url: e.space_id
        ? serviceApi.space_crud + '/' + e.space_id
        : serviceApi.space_crud,
      method: e.space_id ? 'put' : 'post',
      data: {
        levelId: e.levelId,
        productId: e.productId,
        spaceCapacity: e.space,
      },
    })
    .then(() => {
      ElMessage.success('操作成功！')
      setTimeout(() => {
        btn_loading.value = false
        get_list()
      }, 1000)
    })
    .catch((err) => {
      ElMessage.error(err)
      btn_loading.value = false
    })
}
const to_submit = (e) => {
  if (btn_loading.value) return
  btn_loading.value = true
  form_data.value.notice = e
  axios
    .request({
      url: serviceApi.enterprise_level_crud,
      method: 'put',
      data: form_data.value,
    })
    .then((res) => {
      console.log(res)
      ElMessage.success('操作成功！')
      setTimeout(() => {
        btn_loading.value = false
        show_box.value = false
        get_list()
      }, 1000)
    })
    .catch((err) => {
      btn_loading.value = false
      ElMessage.error(err)
    })
}
const get_list = () => {
  axios
    .request({
      url: serviceApi.enterprise_level_list,
      method: 'post',
      data: { current: 1, pageSize: 100 },
    })
    .then((res) => {
      res.data.forEach((item, index) => {
        product_list.value.forEach((item1) => {
          let has_item1 = item.levelDetailList.some((item2) => {
            if (item2.productId == item1.dictCode) {
              item2.name = item1.dictValue
            }
            return item2.productId == item1.dictCode
          })
          if (!has_item1) {
            let obj = {
              name: item1.dictValue,
              productId: item1.dictCode,
              levelId: item.id,
              space: '',
            }
            item.levelDetailList.push(obj)
          }
        })
      })
      list.value = res.data
      get_space_list()
    })
    .catch((err) => {
      ElMessage.error(err)
    })
}
const get_space_list = () => {
  axios
    .request({ url: serviceApi.space_list, method: 'post' })
    .then((res) => {
      console.log(res)
      list.value.forEach((i) => {
        i.levelDetailList.forEach((ii) => {
          ii.space = ''
          res.data.some((iii) => {
            if (ii.levelId == iii.levelId && ii.productId == iii.productId) {
              ii.space_id = iii.id
              ii.space = iii.spaceCapacity
            }
          })
        })
      })
    })
    .catch((err) => {
      ElMessage.error(err)
    })
}
const update_list = (e) => {
  console.log(e)
  form_data.value.levelId = e.row.levelId
  form_data.value.productId = e.row.productId
  form_data.value.notice = e.row.notice
  show_box.value = true
}
</script>

<style lang="scss" scoped></style>
